
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>    
    <style >
    
body,html {
    margin:0; padding:0; background:#a7a09a; color:#000; }
body {
    min-width:1000px; }
#wrap {
    background:#99c; margin:0 auto; width:1000px; }
#header {
    background:#ddd; }
#nav {
    background:#c99; }
#map {
    background:#9c9; }
#sidebar {
    background:#c9c; }
#footer {
    background:#cc9; }
#map {
    background:#9c9; float:left; width:790px;
    padding:5px;
    }
    
#sidebar {
    background:#c9c; float:right; width:200px; }
#footer {
    background:#cc9; clear:both; }
  }

    
#nav ul{
    margin:0; padding:0; list-style:none; }
#nav li{
    display:inline; margin:2px; padding:2px;    
  }

#am, #new{
    text-align:center; display:inline; margin:0; padding:0; color:blue;
    background:#ddd; position:relative; right:5px; border-style:double;
    
}

#header #title {
  font-size:2em;
}

#header ul {  
  list-style:none;  
  padding:5px;
  margin:0;
  text-align:center;
  font-size:1.5em;
}

#header h1 {
    font-size:2em;
    padding:5px;
    margin:0;
    text-align:center;
    }
    
#nav {
    background:#c99; padding:3px; }
    
#map h2, #main h3, #map p {
    padding:0 10px; }
    
#sidebar ul {
    margin-bottom:0; }
    
#sidebar li{
    margin:2px; padding:2px;font-size:1.5em;    
  }
    
#sidebar h3, #sidebar p {
    padding:0 10px; }
#footer p {
    padding:5px; margin:0; }
#sidebar {
    background:#99c; float:right; width:200px; }
#sidebar h3, #sidebar p {
    padding:0 10px 0 0; }
    
#footer ul{
    margin:2px; padding:2px; list-style:none; }
    
#footer li{
    display:inline; margin:2px; padding:2px;font-size:1.5em;
  }


    </style>
    
<title></title>
    <script src="http://ditu.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAZKWRbzG53z_kSdLESSrIHBQsZRBkCSAaSL5LfZuP1mSq2yZm5hQY2pOOG-Wk9-XeyPVtIIi_M6riNA"
            type="text/javascript"></script>
    <script type="text/javascript">

    var map;
    
    function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas")); map.addControl(new
        GSmallMapControl()); map.addControl(new GScaleControl());
        map.setCenter(new GLatLng(39.917, 116.397), 12);
      }      
    }
    
    function test(){
      // ajax call getinfo;
    }
  
   
    function createMarker(pt){
    
    if (window.GMarker) {
    var iconBlue = new GIcon();
    iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
    iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconBlue.iconSize = new GSize(12, 20);
    iconBlue.shadowSize = new GSize(22, 20);
    iconBlue.iconAnchor = new GPoint(6, 20);
    iconBlue.infoWindowAnchor = new GPoint(5, 1);


    var options = {
    title: "marker title",
    icon: iconBlue,
    draggable: true,
    bounceGravity: 0.2,
    dragCrossMove: true
    };
    
    var pin    = new GMarker(pt,options);
    
    var html = ''
    html+= ' <table width="200" border="1"> '
    html+= ' <tr> <td>name</td> </tr>'
    html+= ' <tr> <td><input id="pointName" type="text" name="pointName" /></td> </tr>'
    html+= ' <tr> <td>comment</td> </tr>'
    html+= ' <tr> <td><textarea id="pointComment" name="pointComment" cols="20" rows="5">&nbsp;</textarea></td> </tr>'
    html+= ' <tr> <td><input id="pointSave" type="submit" name="save" value="保存" onclick="test();return false;" /> &nbsp; <input type="reset" name="clear"/> </td> </tr>'
    html+= ' </table>'
    html+= ''
    
    GEvent.addListener(pin, 'click', function() {
    
      pin.openInfoWindowHtml(html);
      }
    );

    return pin;

    }else{
      alert(" null creating");
    return null;
    }

    }

    
    var gistype;
    var tag;
    
    
   
    function showMarkers(){
      gistype = "Point";
      map.clearOverlays();
      
    }
    
    function showLines(){
      gistype = "Line";
      map.clearOverlays();
    }

    function showPolygon(){
      gistype = "Polygon";
      map.clearOverlays();
    }

    function showDiaries(){
      gistype = "Diary";
      map.clearOverlays();
    }

    function changeNav(id){  
      if(id!='back'){
        tag = id;
        document.getElementById("menu").style.display = "none";
        document.getElementById("back_div").style.display = "inline";
        document.getElementById("title").innerHTML = "北京! 我去过的 "+document.getElementById(id).innerHTML;         
        
      }else{
        tag = null;
        document.getElementById("menu").style.display = "inline";
        document.getElementById("back_div").style.display = "none";
        document.getElementById("title").innerHTML = "北京! 我去过的...";        
      }      
      showMarkers();
    }
    
    </script>
  </head>
    
    
    
  <body onload="initialize()" onunload="GUnload()">
    
    <div id="wrap">
      
    <div id="header">
      <ul>
        <li id="title">Hello, 北京! </li>                     
        <li><a href="http://www.google.com/ig/api?hl=en-us&weather=,,,39920000,116469996">        
        {% if weather %}
          {{ condition }}, {{ temp_c}}℃, {{ humidity}}, {{ wind }}, 
        {% else %} {% endif %}</a> </li>
      </ul>  
    </div>
    
    <div id="nav">
        <ul id="menu">
            <li><a href="#" id="hungry" onclick="changeNav('hungry');return false;">饭店</a></li>
            <li><a href="#" id="sleepy" onclick="changeNav('sleepy');return false;">宾馆</a></li>
            <li><a href="#" id="energetic" onclick="changeNav('energetic');return false;">娱乐场所</a></li>
            <li><a href="#" id="romantic" onclick="changeNav('romantic');return false;">浪漫地</a></li>            
        </ul>
        
        <ul id="back_div" style="display:none;">
          <li><a href="#" id="back" onclick="changeNav('back');return false;">返回</a></li>                    
        </ul>  
    </div>

    <div id=map>        
    <div id="map_canvas" style="width: 790px; height: 593px;"> </div>
    
    <div>
    </div>
    
    </div>
    
   <div id="sidebar">
        <ul>
            <li><a href="#" onclick="showMarkers();return false;" > 地点 </a></li>
            <li><a href="#" onclick="showLines();return false;">路线</a></li>
            <li><a href="#" onclick="showPolygon();return false;">  区域</a></li>
        </ul>            
        <hr/>
        <ul>
          <li><a href="#" onclick="showMore();return false;" > 下一组标记 </a></li>
        </ul>
        <hr/>        
        <ul>
        <li><a href="/user">我的据点</a></>
        </ul>          
        {% if logout %}
          <hr/><ul> <li> <a href="{{logout}}">Logout</a></li></ul>
          {% else %}
        {% endif %}
          

              
    </div>
    
    <div id="footer"> 
        <ul>
            <li><a href="#" > rules </a></li>
            <li><a href="#" > help </a></li>
            <li><a href="#" > faq </a></li>
            <li><a href="#" > copy right</a></li>
        </ul>                      
    </div>
    
  </body>
</html>

  
    

